<template>
	<view class="user-action-card" @tap="goToMyComments">
		<!-- 卡片主体 -->
		<view class="card-content">
			<!-- 左侧图标 -->
		<!-- 	<view class="left-icon">
				<text class="iconfont icon-comment"></text>
			</view> -->
			
			<!-- 中间内容 -->
			<view class="middle-content">
				<view class="title-row">
					<text class="title">我的评论</text>
					<text class="badge" v-if="commentCount > 0">{{commentCount}}</text>
				</view>
				<view class="subtitle">查看我发表的所有评论</view>
				
				<!-- 最近评论预览 -->
				<view class="recent-comment" v-if="latestComment">
					<text class="recent-text">最近评论：</text>
					<text class="comment-preview">{{latestComment.content}}</text>
					<text class="comment-time">{{latestComment.createTime}}</text>
				</view>
			</view>
			
			<!-- 右侧箭头 -->
			<view class="right-arrow">
				<text class="iconfont icon-right"></text>
			</view>
		</view>
		
		<!-- 底部统计 -->
		<view class="card-footer">
			<view class="stat-item">
				<text class="stat-num">{{commentCount}}</text>
				<text class="stat-label">评论总数</text>
			</view>
			<view class="stat-item">
				<text class="stat-num">{{articleCount}}</text>
				<text class="stat-label">评论文章</text>
			</view>
		<!-- 	<view class="stat-item">
				<text class="stat-num">{{todayCount}}</text>
				<text class="stat-label">今日评论</text>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				commentCount: 0,
				articleCount: 0,
				todayCount: 0,
				latestComment: null
			}
		},
		created() {
			this.loadCommentStats()
		},
		methods: {
			loadCommentStats() {
				try {
					const keys = uni.getStorageInfoSync().keys
					const commentKeys = keys.filter(key => key.startsWith('article_comments_'))
					let totalComments = []
					let articleSet = new Set()
					let todayComments = 0
					let latestComment = null
					
					// 获取今天的日期（去掉时间部分）
					const today = new Date().toDateString()
					
					commentKeys.forEach(key => {
						const comments = uni.getStorageSync(key)
						if (comments) {
							const articleComments = JSON.parse(comments)
							const userInfo = this.getUserInfo()
							
							// 筛选当前用户的评论
							const userComments = articleComments.filter(comment => 
								comment.userName === userInfo.userName
							)
							
							if (userComments.length > 0) {
								// 统计文章数
								articleSet.add(key.split('article_comments_')[1])
								
								// 统计今日评论
								userComments.forEach(comment => {
									if (new Date(comment.createTime).toDateString() === today) {
										todayComments++
									}
								})
								
								// 更新最新评论
								const newest = userComments.sort((a, b) => 
									new Date(b.createTime) - new Date(a.createTime)
								)[0]
								
								if (!latestComment || new Date(newest.createTime) > new Date(latestComment.createTime)) {
									latestComment = newest
								}
								
								totalComments = totalComments.concat(userComments)
							}
						}
					})
					
					this.commentCount = totalComments.length
					this.articleCount = articleSet.size
					this.todayCount = todayComments
					this.latestComment = latestComment
					
				} catch (e) {
					console.error('加载评论统计失败:', e)
				}
			},
			
			getUserInfo() {
				const userInfo = {
					userName: '微信用户',
					userAvatar: '/static/icon/user.png'
				}
				return userInfo 
			},
			
			goToMyComments() {
				console.log("111");
				try {
				        uni.navigateTo({
				            url: '/pages/comments/comments',
				            success: (res) => {
				                uni.showToast({
				                    title: '页面跳转成功',
				                    icon: 'none'
				                });
				            },
				            fail: (err) => {
				                console.error('跳转失败:', err);
				                // 如果跳转失败，显示提示
				                uni.showToast({
				                    title: '页面跳转失败',
				                    icon: 'none'
				                });
				            }
				        });
				    } catch (e) {
				        console.error('跳转错误:', e);
				    }
			}
		}
	}
</script>

<style lang="scss">
.user-action-card {
	background: #ffffff;
	border-radius: 12rpx;
	margin: 20rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
	
	.card-content {
		display: flex;
		align-items: center;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
		
		// .left-icon {
		// 	width: 80rpx;
		// 	height: 80rpx;
		// 	background: #e8f4ff;
		// 	border-radius: 50%;
		// 	display: flex;
		// 	align-items: center;
		// 	justify-content: center;
		// 	margin-right: 20rpx;
			
		// 	.iconfont {
		// 		font-size: 40rpx;
		// 		color: #42bd56;
		// 	}
		// }
		
		.middle-content {
			flex: 1;
			margin-right: 20rpx;
			
			.title-row {
				display: flex;
				align-items: center;
				margin-bottom: 8rpx;
				
				.title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					margin-right: 12rpx;
				}
				
				.badge {
					background: #42bd56;
					color: #fff;
					font-size: 24rpx;
					padding: 2rpx 12rpx;
					border-radius: 20rpx;
					min-width: 40rpx;
					text-align: center;
				}
			}
			
			.subtitle {
				font-size: 26rpx;
				color: #666;
				margin-bottom: 16rpx;
			}
			
			.recent-comment {
				background: #f8f8f8;
				padding: 16rpx;
				border-radius: 8rpx;
				
				.recent-text {
					font-size: 24rpx;
					color: #999;
					margin-bottom: 8rpx;
					display: block;
				}
				
				.comment-preview {
					font-size: 26rpx;
					color: #333;
					margin-bottom: 8rpx;
					display: block;
					// 文本超出显示省略号
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				
				.comment-time {
					font-size: 24rpx;
					color: #999;
				}
			}
		}
		
		.right-arrow {
			.iconfont {
				font-size: 32rpx;
				color: #999;
			}
		}
	}
	
	.card-footer {
		display: flex;
		padding-top: 20rpx;
		
		.stat-item {
			flex: 1;
			text-align: center;
			
			.stat-num {
				font-size: 36rpx;
				font-weight: bold;
				color: #42bd56;
				display: block;
				margin-bottom: 8rpx;
			}
			
			.stat-label {
				font-size: 24rpx;
				color: #666;
			}
		}
	}
	
	&:active {
		transform: scale(0.98);
		transition: all 0.2s;
	}
}
</style>